<template>
  <div class="log-manager">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="报表统计" name="first">

        <el-row>
          <el-col :span="6">
            <el-card class="box-card ms-col">
              <div class="text item" @click="clickInterfaceMaintainerDistribution()">
                <img src="~@/assets/img/bar.svg" class="image">
                <div class="card-text describes">
                  <span>接口维护人分布</span>
                  <el-tag type="warning">测试接口</el-tag>
                  <div>
                    <span class="font">按添加人显示接口分布</span>
                  </div>
                </div>
              </div>
            </el-card>
            <interfaceMaintainerDistribution ref="interfaceMaintainerDistribution"></interfaceMaintainerDistribution>

          </el-col>

          <el-col :span="6">
            <el-card class="box-card ms-col">
              <div class="text item">
                <img src="~@/assets/img/bar.svg" class="image">
                <div class="card-text describes">
                  <span>用例维护人分布</span>
                  <el-tag>测试用例</el-tag>
                  <div>
                    <span class="font">按添加人显示接口用例分布</span>
                  </div>
                </div>
              </div>
            </el-card>

          </el-col>
          <el-col :span="6">
            <el-card class="box-card ms-col">
              <div class="text item">
                <img src="~@/assets/img/pie.svg" class="image">
                <div class="card-text describes">
                  <span>每日新增用例统计</span>
                  <el-tag>测试用例</el-tag>
                  <div>
                    <span class="font">显示每日新增的用例结果</span>
                  </div>
                </div>
              </div>
            </el-card>

          </el-col>
          <el-col :span="6">
            <el-card class="box-card ms-col">
              <div class="text item">
                <img src="~@/assets/img/column.svg" class="image">
                <div class="card-text describes">
                  <span>定时任务用例统计</span>
                  <el-tag>测试接口</el-tag>
                  <div>
                    <span class="font">按定时任务显示测试用例分布</span>
                  </div>
                </div>
              </div>
            </el-card>

          </el-col>

          <el-col :span="6">
            <el-card class="box-card ms-col">
              <div class="text item" @click="clickdDailyExecuteCaseStatistics()">
                <img src="~@/assets/img/area.svg" class="image">
                <div class="card-text describes">
                  <span>每日执行用例分布</span>
                  <el-tag type="success">执行情况</el-tag>
                  <div>
                    <span class="font">按每日执行用例统计</span>
                  </div>
                </div>
              </div>
            </el-card>
            <dailyExecuteCaseStatistics ref="dailyExecuteCaseStatistics"></dailyExecuteCaseStatistics>
          </el-col>
        </el-row>

      </el-tab-pane>
      <el-tab-pane label="测试报告" name="second">
        <report></report>
      </el-tab-pane>
    </el-tabs>

  </div>
</template>


<script>
import report from './report.vue'
import interfaceMaintainerDistribution from './components/interfaceMaintainerDistribution.vue'
import dailyExecuteCaseStatistics from './components/dailyExecuteCaseStatistics.vue'
export default {
  data () {
    return {
      activeName: 'first'
    }


  },

  components: {
    report,
    interfaceMaintainerDistribution,
    dailyExecuteCaseStatistics
  },

  methods: {
    handleClick () { },

    //点击接口维护人分布
    clickInterfaceMaintainerDistribution () {
      this.$refs.interfaceMaintainerDistribution.dialogVisible = true

    },

    //点击每日执行用例分布
    clickdDailyExecuteCaseStatistics () {
      this.$refs.dailyExecuteCaseStatistics.dialogVisible = true
    },
  }
}
</script>

<style scoped>
.log-manager .ms-col {
  margin: 5px;
}

.log-manager .image {
  width: 100%;
}

.log-manager .discribes {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.log-manager .card-text {
  padding-left: 20px;
  padding-right: 10px;
  padding-top: 20px;
}

.log-manager >>> .el-tag {
  height: 19px;
  line-height: unset;
  padding: 3px 10px;
}

.log-manager .font {
  font-size: 13px;
  color: rgb(153, 153, 153);
}
</style>